<template>
    <div class="todo-input">
   <div class="field is-grouped container" :style="{marginTop: '12px'}">
      <p class="control is-expanded">
        <input
          class="input"
          type="text"
          placeholder="请输入新待办事项"
          v-model.trim="inputValue"
          @keydown.enter="handleAdd"
          ref="inputRef"
        >
      </p>
      <p class="control">
        <a href="/" class="button is-primary" @click.prevent="handleAdd">
          添加
        </a>
      </p>
    </div>
    </div>
</template>

<script>
export default {
  name: 'TodoInput',
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleAdd() {
      this.$refs.inputRef.focus()
      if (this.inputValue.length === 0) {
        return
      }
      this.$emit('add', this.inputValue)
      this.inputValue = ''
    }
  },
  directives: { // 自定义指令
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
